<template>
<view class="smart-page">
<!-- 页面标题头begin -->
<view class="smart-page-head">
<view class="smart-page-head-title">slider滑块</view>
</view>
<!-- 页面标题头end -->
<view>显示当前值</view>
<view><slider value="20" show-value="true" @change="sliderChange"></slider></view>
<view>设置步长step</view>
<view><slider value="20" show-value="true" @change="sliderChange" step="5"></slider></view>
<view>设置最大值、最小值</view>
<view><slider show-value="true" value="100" min="50" max="500"></slider></view>
<view>设置颜色</view>
<view>
<slider activeColor="#4CD964" backgroundColor="#AAA800" block-color="#FFDADE" block-size="15"></slider>
</view>
</view>
</template>

<script>
export default {
data() {
return {
}
},
methods: {
sliderChange(e){
console.log('当前value值是：' + e.detail.value);
}
}
}
</script>